<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://localhost:8080/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://localhost:8080/css/course.css" type="text/css">
</head>
<body>
    <div id="main">
        <div class="wrap ">
            <div class="top">
                <div class="course-top clearfix">
                    <a class="top-header" href="/course/list">
                        <img src="http://localhost:8080/images/logo-course.png?111" alt="免费课程" width="140" height="60">
                    </a>
                    <!-- 这是广告位，无论如何都得有这个容器分割上下元素 -->
                    <div class="adver-con" style="display: inline-block;margin-left: 16px;">
                        <img src="http://localhost:8080/images/course-top.png" style="height:60px;width: 96px;">
                    </div>
                    <div class='course-top-search'>
                        <div class="search-area" data-search="top-banner">
                            <input class="search-input" data-suggest-trigger="suggest-trigger"  placeholder="搜索感兴趣的内容" type="text" autocomplete="off">
                            <input type='hidden' class='btn_search' data-search-btn="search-btn" />
                            <ul class="search-area-result" data-suggest-result="suggest-result">
                            </ul>
                        </div>
                        <div class='showhide-search' data-show='no'>
                            <span class='glyphicon glyphicon-search  icon-search'></span>
                        </div>
                    </div>
                </div>
                <div class="course-content">
                    <div class="course-nav-box">
                        <div class="course-nav-row clearfix">
                            <span class="hd l">方向：</span>
                            <div class="bd">
                                <ul class="direct">
                                    <li class="course-nav-item on">
                                        <a href="/directs/0">全部</a>
                                    </li>
                                    <li class="course-nav-item
                                        ">
                                        <a href="/directs/2" data-ct="2">前端开发</a>
                                    </li>
                                    <li class="course-nav-item
                                        ">
                                        <a href="/directs/3" data-ct="3">后端开发</a>
                                    </li>
                                    <li class="course-nav-item
                                        ">
                                        <a href="/directs/4" data-ct="4">移动开发</a>
                                    </li>
                                    <!--<li class="course-nav-item-->
                                        <!--">-->
                                        <!--<a href="/course/list?c=algorithm" data-ct="algorithm">算法&数学</a>-->
                                    <!--</li>-->
                                    <li class="course-nav-item
                                        ">
                                        <a href="/directs/1" data-ct="1">前沿技术</a>
                                    </li>
                                    <li class="course-nav-item
                                        ">
                                        <a href="/directs/5" data-ct="5">云计算&大数据</a>
                                    </li>
                                    <li class="course-nav-item
                                        ">
                                        <a href="/directs/6" data-ct="6">运维&测试</a>
                                    </li>
                                    <!--<li class="course-nav-item-->
                                        <!--">-->
                                        <!--<a href="/course/list?c=data" data-ct="data">数据库</a>-->
                                    <!--</li>-->
                                    <li class="course-nav-item
                                        ">
                                        <a href="/directs/7" data-ct="7">UI设计&多媒体</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="course-nav-row course-nav-skills clearfix">
                            <div class="js-course-skills course-skills-box">
                                <span class="hd l">分类：</span>
                                <div class="bd">
                                    <ul class="type">
                                        <!--<li class="course-nav-item on">-->
                                            <!--<a href="/course/list?">全部</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=html" data-id=7 data-ct=html>HTML/CSS</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=javascript" data-id=44 data-ct=javascript>JavaScript</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=vuejs" data-id=1423 data-ct=vuejs>Vue.js</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=reactjs" data-id=1374 data-ct=reactjs>React.JS</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=angular" data-id=1123 data-ct=angular>Angular</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=nodejs" data-id=222 data-ct=nodejs>Node.js</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=jquery" data-id=219 data-ct=jquery>jQuery</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=bootstrap" data-id=1263 data-ct=bootstrap>Bootstrap</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=sassless" data-id=1429 data-ct=sassless>Sass/Less</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=webapp" data-id=1260 data-ct=webapp>WebApp</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=miniprogram" data-id=5240 data-ct=miniprogram>小程序</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=fetool" data-id=1261 data-ct=fetool>前端工具</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=java" data-id=220 data-ct=java>Java</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=springboot" data-id=4903 data-ct=springboot>SpringBoot</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=python" data-id=1118 data-ct=python>Python</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=crawler" data-id=5272 data-ct=crawler>爬虫</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=django" data-id=4905 data-ct=django>Django</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=tornado" data-id=5243 data-ct=tornado>Tornado</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=go" data-id=1358 data-ct=go>Go</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=php" data-id=1 data-ct=php>PHP</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=c" data-id=1273 data-ct=c>C</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=cplusplus" data-id=1331 data-ct=cplusplus>C++</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=csharp" data-id=1362 data-ct=csharp>C#</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=ruby" data-id=3629 data-ct=ruby>Ruby</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=android" data-id=223 data-ct=android>Android</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=ios" data-id=955 data-ct=ios>iOS</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=reactnative" data-id=4904 data-ct=reactnative>React native</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=weex" data-id=5245 data-ct=weex>WEEX</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=algorithmds" data-id=5248 data-ct=algorithmds>算法与数据结构</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=maths" data-id=5249 data-ct=maths>数学</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=bigdata" data-id=1359 data-ct=bigdata>大数据</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=hadoop" data-id=5251 data-ct=hadoop>Hadoop</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=spark" data-id=5250 data-ct=spark>Spark</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=hbase" data-id=5252 data-ct=hbase>Hbase</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=storm" data-id=5273 data-ct=storm>Storm</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=cloudcomputing" data-id=1122 data-ct=cloudcomputing>云计算</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=aws" data-id=5256 data-ct=aws>AWS</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=docker" data-id=5259 data-ct=docker>Docker</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=kubernetes" data-id=5260 data-ct=kubernetes>Kubernetes</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=dba" data-id=5261 data-ct=dba>运维</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=oma" data-id=5207 data-ct=oma>自动化运维</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=dbatool" data-id=5262 data-ct=dbatool>运维工具</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=linux" data-id=468 data-ct=linux>Linux</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=test" data-id=1422 data-ct=test>测试</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=gntest" data-id=5263 data-ct=gntest>功能测试</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=xntest" data-id=5264 data-ct=xntest>性能测试</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=zdhtest" data-id=5265 data-ct=zdhtest>自动化测试</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=jktest" data-id=5266 data-ct=jktest>接口测试</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=aqtest" data-id=5268 data-ct=aqtest>安全测试</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=mysql" data-id=952 data-ct=mysql>MySQL</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=redis" data-id=4917 data-ct=redis>Redis</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=mongodb" data-id=958 data-ct=mongodb>MongoDB</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=oracle" data-id=1309 data-ct=oracle>Oracle</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=sqlserver" data-id=1366 data-ct=sqlserver>SQL Server</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=wff" data-id=4737 data-ct=wff>微服务</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=blockchain" data-id=5233 data-ct=blockchain>区块链</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=modelmaking" data-id=5269 data-ct=modelmaking>模型制作</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=ethereum" data-id=5234 data-ct=ethereum>以太坊</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=ai" data-id=5236 data-ct=ai>人工智能</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=machine" data-id=4914 data-ct=machine>机器学习</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=deep" data-id=4915 data-ct=deep>深度学习</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=pcvision" data-id=5237 data-ct=pcvision>计算机视觉</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=nlp" data-id=5238 data-ct=nlp>自然语言处理</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=datafxwj" data-id=5239 data-ct=datafxwj>数据分析&挖掘</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=dxdh" data-id=4735 data-ct=dxdh>动效动画</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=uijc" data-id=4732 data-ct=uijc>设计基础</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=uitool" data-id=4733 data-ct=uitool>设计工具</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=uiapp" data-id=4734 data-ct=uiapp>APPUI设计</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=ixd" data-id=5270 data-ct=ixd>产品交互</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=unity3d" data-id=1281 data-ct=unity3d>Unity 3D</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=css" data-id=56 data-ct=css>CSS</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=cocos2dx" data-id=1361 data-ct=cocos2dx>Cocos2d-x</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=html5" data-id=221 data-ct=html5>Html5</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=css3" data-id=1262 data-ct=css3>CSS3</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=suanfa" data-id=4869 data-ct=suanfa>算法</a>-->
                                        <!--</li>-->
                                        <!--<li class="course-nav-item">-->
                                            <!--<a href="/course/list?c=nosql" data-id=4916 data-ct=nosql>NoSql</a>-->
                                        <!--</li>-->
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="course-nav-row clearfix border_bottom_none">


                            <a href='javascript:;' class='course-recommend' onclick="_hmt.push(['_trackEvent', 'course', 'click', 'inlet'])"></a>

                            <span class="hd l">难度：</span>
                            <div class="bd">
                                <ul class="level">

                                    <li class="course-nav-item on">
                                        <a href="/level/0">全部</a>
                                    </li>
                                    <li class="course-nav-item ">
                                        <a href="/level/1">入门</a>
                                    </li>
                                    <li class="course-nav-item ">
                                        <a href="/level/2">初级</a>
                                    </li>
                                    <li class="course-nav-item ">
                                        <a href="/level/3">中级</a>
                                    </li>
                                    <li class="course-nav-item ">
                                        <a href="/level/4">高级</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="container">
            <div class="course-tool-bar clearfix">
                <div class="tool-left l">
                    <a href="/course/list?sort=last" class="moco-change-smalle-btn active">最新</a>
                    <a href="/course/list?sort=pop" class="moco-change-smalle-btn">最热</a>
                </div>
                <div class="l">
                    <span class="tool-item" style="display: none;">
                        <a class="follow-learn tool-chk" href="javascript:void(0);">跟我学</a>
                    </span>
                </div>
                <div class="tool-right r">
                    <span class="tool-item">
                        <a class="hide-learned tool-chk" href="">
                            隐藏已参加课程
                        </a>
                    </span>
                    <span class="tool-item total-num">
                       共<b>0</b>个课程
                    </span>
                    <span class="tool-item tool-pager">
                        <span class="pager-num">
                          <b class="pager-cur">1</b>/<em class="pager-total">30</em>
                        </span>
                        <a href="javascript:void(0)" class="pager-action pager-prev  disabled">
                            <span class="glyphicon glyphicon-chevron-left icon-right2"></span>
                        </a>

                        <a href="/course/list?page=2" class="pager-action pager-next">
                            <span class="glyphicon glyphicon-chevron-right icon-right2"></span>
                        </a>
                    </span>
                </div>

            </div>
            <div class="course-list">
                <div class="moco-course-list">
                    <div class="clearfix">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="http://localhost:8080/js/jQuery%20v3.3.1.js"></script>
    <script src="http://localhost:8080/bootstrap/js/bootstrap.min.js"></script>
    <script src="http://localhost:8080/js/course.js"></script>
</body>
</html>